<div class="http-requests-table vlt-table">
  <table class="is-fullwidth">
    <caption class="is-collapsed">HTTP Request Volume</caption>
    <thead class="has-text-weight-semibold">
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Requests</th>
        {{#if (gt counters.length 1)}}
          <th scope="col">Change</th>
        {{/if}}
      </tr>
    </thead>
    <tbody>
      {{#each (reverse countersWithChange) as |c|}}
        <tr>
          <th scope="row" class="start-time has-text-black">{{ format-utc c.start_time '%B %Y' }}</th>
          <td>{{format-number c.total}}</td>
          {{#if (gt counters.length 1)}}
            <td class="has-text-grey-dark percent-change" data-test-change="{{c.percentChange}}">
              {{#if c.percentChange}}
                <Icon @glyph={{c.glyph}} class={{c.glyph}}/>
                {{c.percentChange}}%
              {{else}}
                <Icon @glyph="minus-plain" />
              {{/if}}
            </td>
          {{/if}}
        </tr>
      {{/each}}
    </tbody>
  </table>
</div>
